@import "tailwindcss/index.css";
/*@import "./css/base.css";*/
/*@import "element-plus/dist/index.css";*/
@import "pace-js/themes/blue/pace-theme-minimal.css";
@import "./css/font-awesome.css";
@import "element-plus/theme-chalk/index.css";
@import 'element-plus/theme-chalk/dark/css-vars.css';
@import "./css/variables.css";

:root {
    --color-background: var(--vt-c-white);
    --color-background-soft: var(--vt-c-white-soft);
    --color-background-mute: var(--vt-c-white-mute);

    --color-border: var(--vt-c-divider-light-2);
    --color-border-hover: var(--vt-c-divider-light-1);

    --color-heading: var(--vt-c-text-light-1);
    --color-text: var(--vt-c-text-light-1);

    --section-gap: 160px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    font-weight: normal;
}

#app {
    min-height: 100vh;
    font-weight: normal;
    font-family: "FontAwesome",
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
}

#app > .el-container.is-vertical {
    min-height: 100vh;
}

a,
.green {
    text-decoration: none;
    color: hsla(160, 100%, 37%, 1);
    transition: 0.4s;
    padding: 3px;
}

@media (hover: hover) {
    a:hover {
        background-color: hsla(160, 100%, 37%, 0.2);
    }
}

/* transition 过渡效果 slide-fade */
.slide-fade-enter-active {
    transition: all 0.3s cubic-bezier(1, 0.1, 0.2, 1);
}

.slide-fade-leave-active {
    transition: all 0.2s cubic-bezier(1, 0.1, 0.2, 1);
}

.slide-fade-enter-active,
.slide-fade-leave-active {
    overflow: hidden;
    pointer-events: none;
}

.slide-fade-enter-from {
    transform: translateX(-30px);
    opacity: 0;
}

.slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
}
